<template>
  <view class="whe_maxv xd" style="background-color: #f8faf7">
    <view class="sy_bg xd" style="height: 350px"></view>
    <view class="jd pad_10 boxs" style="top: 50px;left: 0;width: 100%">

      <view class="ba_white bor_10 xyy pad_15 boxs he_max">
        <view class="fz_18 pad_b_10">请选择充值金额</view>
        <view class="split_3">
          <view class="pad_10 boxs">
            <view @click="addCz(50)" :class="money===50&&!zdy?'czxz':'czwxz'">
              ¥ 50
            </view>
          </view>
          <view class="pad_10 boxs">
            <view @click="addCz(100)" :class="money===100&&!zdy?'czxz':'czwxz'">
              ¥ 100
            </view>
          </view>
          <view class="pad_10 boxs">
            <view @click="addCz(200)" :class="money===200&&!zdy?'czxz':'czwxz'">
              ¥ 200
            </view>
          </view>
        </view>
        <view class="split_3">
          <view class="pad_10 boxs">
            <view @click="addCz(300)" :class="money===300&&!zdy?'czxz':'czwxz'">
              ¥ 300
            </view>
          </view>
          <view class="pad_10 boxs">
            <view @click="addCz(500)" :class="money===500&&!zdy?'czxz':'czwxz'">
              ¥ 500
            </view>
          </view>
          <view class="pad_10 boxs">
            <view @click="addCz(999)" :class="zdy?'czxz':'czwxz'">
              <text v-if="payValue!=='自定义'">¥</text>{{ payValue }}
            </view>
          </view>
        </view>
      </view>

      <view class="ba_white bor_10 xyy pad_15 mag_t-20 boxs he_max">
        <view class="fz_18 pad_b_10">选择支付方式</view>
        <view v-for="(item,index) in wxzf" :key="index" @click="updaPay(item.code)" class="wh_f_l pad_10_0">
          <view>
            <img class="icon_wh centerdq" :src="item.icon" alt="">
            <text class="centerdq">{{ item.name }}</text>
          </view>
          <view>
            <img v-if="pay_id === item.code" class="icon_wh" src="../../static/icon/chenggong.png" alt="">
            <img v-if="pay_id !== item.code" class="icon_wh" src="../../static/icon/zfk.png" alt="">
          </view>
        </view>

      </view>
<!--      <view class="mag_t-20 wz_hui xt">-->
<!--        <image class="icon_wh centerdq" src="../img/i.png" />-->
<!--        <text class="centerdq">本次充值可获得充值金额一半的积分</text>-->
<!--      </view>-->
    </view>

    <view class="pm boxs" style=" padding: 0 10px 20px;width: 100%;height:60px;left: 0;bottom: 0">
      <view @click="pay(money)" class="jz_flex wz_white bor_25 mag_r-10"
            style="background-color: #3a9e5f;height: 40px">
        <text>立即充值</text>
      </view>
    </view>

    <up-popup :show="show"
              mode="bottom"
              @close="close"
              @open="open"
              :mask-closable="true">
      <view>
        <view style="padding: 15px">
          <view>
            <view class="disp bor_5 centerdq"
                  style="background-color: #3a9e5f;width: 5px;height: 20px"></view>
            <text class="centerdq mag_l-5">余额充值</text>
          </view>
          <view class="pad_30_0">
            <view class="pad_10 boxs" style="border: 1px solid #3a9e5f;
            border-radius: 15px;">
              <up-input
                  placeholder="请输入充值金额"
                  border="none"
                  type="number"
                  min="1"
                  @change="inputValue"
                  v-model="zdymoney"
              ></up-input>
            </view>
          </view>

          <view class="bor_25 wz_white wz_jz pad_10_0"
                @click="pay(zdymoney)"
                style="background-color: #3a9e5f">
            立即充值
          </view>
        </view>
      </view>
    </up-popup>
    <up-popup :show="stshow"
              mode="bottom"
              @close="closest"
              @open="open"
              :mask-closable="true">
      <view>
        <view style="padding: 15px">
          <view>
            <view class="disp bor_5 centerdq"
                  style="background-color: #3a9e5f;width: 5px;height: 20px"></view>
            <text class="centerdq mag_l-5">请选择</text>
          </view>
          <view class="pad_30_0">
            <radio-group>
              <view @click="addjph(item.id)" v-for="(item,index) in jphList" :key="index"
                    class="wh_f_l pad_l-20 boxs" style="height: 50px;">
                <view class="">
                  <view class="wh_f_l wh_max">
                    <view class="ccsl_1">
                      <text class="centerdq mag_l-10 fz_16">{{ item.name }}</text>
                    </view>
                  </view>
                </view>
                <view>
                  <radio :value="item.id"  :checked="st_id===item.id" />
                </view>
              </view>
            </radio-group>
          </view>

          <view class="bor_25 wz_white wz_jz pad_10_0"
                @click="checkst"
                style="background-color: #3a9e5f">
            立即选择
          </view>
        </view>
      </view>
    </up-popup>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script>
import {
  jphStStoreList,
  miniPay, platform, platform2,
  recharge,
  stRechargeHmy,
  stRechargeJph,
  stRechargeReq,
  stRechargeZy, swagger
} from "../../Api/shop";
import {object} from "uview-plus/libs/function/test";

export default {
  name: "index",
  data(){
    return{
      tabList:[
        {id:1,name: '充值明细'},
        {id:2,name: '消费明细'},
      ],
      tabIndex:1,
      money:50,
      payValue:'自定义',
      show:false,
      zdymoney:"",
      pay_id:1,
      stshow:false,
      jphList:[],
      st_id:null,
      list:[],
      wxzf:[],
      zdy:false
    }
  },
  methods:{
    addjph(e){
      this.st_id = e
      console.log(e)
    },
    checkst(){
      if(this.st_id){
        this.stshow = false
      }
    },
    inputValue(e){
      this.payValue = e
      this.money = e
    },
    object,
    updaPay(e){
      this.pay_id = e
      switch (e){
        case 1:
          break;
        case 2:
          this.showToast('请确认待支付账户绑定手机号码与本平台手机号码相同')
          break;
        case 3:
          this.showToast('请确认待支付账户绑定手机号码与本平台手机号码相同')
          this.stshow = true
          this.jphList = this.list
          this.st_id = this.list[0].id
          break;
        case 4:
          this.showToast('请确认待支付账户绑定手机号码与本平台手机号码相同')
          this.stshow = true
          this.jphList = [{id:"cash",name:'XJ'},{id:"subsidy",name:'BT'}]
          this.st_id = "cash"
          this.showToast('请确认待支付账户绑定手机号码与本平台手机号码相同')
          break;
        case 5:
          this.showToast('请确认待支付账户绑定手机号码与本平台手机号码相同')
          break;
      }
    },
    close(){
      this.show = false
      if(!this.payValue){
        this.payValue = '自定义'
      }
    },
    closest(){
      this.stshow = false
      // this.pay_id = 1
    },
    addTab(e){
      this.tabIndex = e.id
    },
    // 支付
    pay(e){
      let tthis = this
      uni.showModal({
        title: '提示',
        content: '请确认支付',
        success: function (res) {
          if (res.confirm) {
            switch (tthis.pay_id){
                // 微信支付
              case 1:
                recharge({
                  price:e
                }).then(res => {
                  let data = res.data
                  uni.requestPayment({
                    provider: 'wxpay',
                    timeStamp: data.timeStamp,
                    nonceStr: data.nonceStr,
                    package: data.package,
                    signType: data.signType,
                    paySign: data.paySign,
                    delivery_type:1,
                    _debug: 1,
                    success: (payres) => {
                      uni.showToast({
                        icon: 'none',
                        title: '支付成功'
                      })
                      tthis.show = false
                      tthis.stshow = false
                    },
                    fail: (error) => {
                      uni.showToast({
                        icon: 'none',
                        title: '支付失败'
                      })
                      tthis.show = false
                      tthis.stshow = false
                    }
                  })
                })
                break;
                // 正元支付
              case 2:
                stRechargeZy({price:e}).then(res=>{
                  if(res.success){
                    uni.showToast({
                      icon: 'none',
                      title: '支付成功'
                    })
                  }
                  tthis.show = false
                  tthis.stshow = false
                })
                break;
                // 金平湖支付
              case 3:
                // tthis.st_id = tthis.jphList[0].id
                stRechargeJph({
                  price:e,
                  eatStoreId:tthis.st_id
                }).then(res => {
                  if(res.success){
                    uni.showToast({
                      icon: 'none',
                      title: '支付成功'
                    })
                  }
                  tthis.show = false
                  tthis.stshow = false
                })
                break;
                // 云点优味支付
              case 4:
                stRechargeReq({
                  price:e,
                  type:tthis.st_id
                }).then(res => {
                  if(res.success){
                    uni.showToast({
                      icon: 'none',
                      title: '支付成功'
                    })
                  }
                  tthis.show = false
                  tthis.stshow = false
                })
                break;
                // 和美云食堂
              case 5:
                stRechargeHmy({
                  price:e
                }).then(res => {
                  if(res.success){
                    uni.showToast({
                      icon: 'none',
                      title: '支付成功'
                    })
                  }
                  tthis.show = false
                  tthis.stshow = false
                })
                break;
                //公安充值
              case 6:
                swagger({
                  price:e
                }).then(res=>{
                  if(res.success){
                    uni.showToast({
                      icon: 'none',
                      title: '支付成功'
                    })
                  }
                  tthis.show = false
                  tthis.stshow = false
                })
                break;
            }
          }
        }
      });
    },
    addCz(e){
      if(e === 999){
        this.zdymoney = ""
        this.show = true
        this.zdy = true
      }else {
        this.money = e
        this.payValue = '自定义'
        this.zdy = false
      }

    },
    //消息提示
    showToast(msg, type = "default") {
      uni.showToast({
        title: msg,
        icon: "none", // 图标类型，可选值：success, none
        duration: 2500 // 显示时间，单位毫秒
      });
    },
    submitOrder(){

    }
  },
  onShow(){
    // 获取食堂列表
    jphStStoreList().then(res=>{
      this.list = res.data
    })
    platform2().then(res=>{
      this.wxzf = res.data
      console.log('充值列表',this.wxzf)
    })
  }
}
</script>
<style scoped lang="scss">


.czxz{
  border: 2px solid #3a9e5f;
  color: #383838;
  text-align: center;
  border-radius: 5px;
  padding: 7px 0;
}
.czwxz{
  border: 2px solid #e4e7e0;
  color: #6b8073;
  text-align: center;
  border-radius: 5px;
  padding: 7px 0;
}
</style>
